<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card shadow="never">
        <div slot="header" class="tl-center">供应商类型图</div>
        <div id="pie" :style="{width: '100%', height: '400px'}"></div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="never">
        <div slot="header" class="tl-center">供应商准入和未准入</div>
        <div id="circle" :style="{width: '100%', height: '400px'}"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card shadow="never">
        <div slot="header" class="tl-center">不良记录柱状图</div>
        <div id="bar" :style="{width: '100%', height: '400px'}"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { getSupplierTypeNum, getSupplierEntryNum, getSupplierBadNum } from '@/api/supplier'
export default {
  data() {
    return {
      legendData: [],
      seriesData: [],
      polar: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: '10px',
          left: 'left',
          data: []
        },
        series: [
          {
            name: '类型',
            type: 'pie',
            radius: '65%',
            center: ['50%', '38%'],
            data: [],
            label: {
              show: false
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      // 右边图
      polar1: {
        legend: {
          left: 'center',
          bottom: 10
        },
        grid: {
          y: 20,
          bottom: 120
        },
        tooltip: {},
        dataset: {
          source: []
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            rotate: -20
          },
          data: []
        },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      },
      // 中间图
      polar2: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: 10,
          data: ['准入', '未准入']
        },
        series: [
          {
            name: '供应商准入',
            type: 'pie',
            radius: ['45%', '65%'],
            center: ['50%', '38%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    // 供应商类型数据获取
    getSupplierTypeNum().then(res => {
      let legendData = []
      let seriesData = []
      res.data.map(v => {
        legendData.push(v.dictionariesShowName)
        seriesData.push({
          value: v.supplierNum,
          name: v.dictionariesShowName
        })
        this.legendData.push(v.dictionariesShowName)
        this.seriesData.push({
          value: v.supplierNum,
          name: v.dictionariesShowName
        })
      })
      var dom = document.getElementById('pie')
      var myChart = this.echarts.init(dom, 'light')

      this.polar.legend.data = legendData
      this.polar.series[0].data = seriesData
      myChart.setOption(this.polar)
    })

    // 不良记录获取
    getSupplierBadNum().then(res => {
      console.log('res', res.data)
      let arr = res.data
      let word = ['type', '不良记录数', '供应商不良记录', '纳入黑名单', '停止采购']
      let sourceData = [word]
      let xAxisData = []
      arr.map((v, index) => {
        let arr1 = []
        arr1.push(v.dictionariesShowName)
        arr1.push(v.badNum)
        arr1.push(v.supplierNum)
        arr1.push(v.supplierBlacknum)
        arr1.push(v.supplierStopnum)
        xAxisData.push(v.dictionariesShowName)
        sourceData.push(arr1)
      })
      console.log('source', sourceData)

      var dom = document.getElementById('bar')
      var myChart = this.echarts.init(dom, 'light')

      this.polar1.dataset.source = sourceData
      this.polar1.xAxis.data = xAxisData
      myChart.setOption(this.polar1)
      let _this = this
      myChart.on('click', function(params) {
        // console.log('getProcessTypeTotal', params)
        _this.$router.push({
          path: '/supplier/supplier-badrecord'
        })
      })
    })

    getSupplierEntryNum().then(res => {
      var dom = document.getElementById('circle')
      var myChart = this.echarts.init(dom, 'light')
      const { data } = res
      let seriesData = [
        { name: '准入', value: data[0].supplierEntrynum },
        { name: '未准入', value: data[0].supplierUnentrynum }
      ]
      this.polar2.series[0].data = seriesData
      myChart.setOption(this.polar2)
      let _this = this
      myChart.on('click', function(params) {
        // console.log('getProcessTypeTotal', params)
        _this.$router.push({
          path: '/supplier/supplier-access'
        })
      })
    })
  }
}
</script>

<style scoped>
.el-card >>> .el-card__body {
  padding: 0;
}
</style>
